doctype html
html(lang="en")
	head
		title StoryMap Embed
		meta(charset='utf-8')
		meta(name='description', content='TimelineJS Embed')
		meta(name='apple-mobile-web-app-capable', content='yes')
		meta(name='apple-touch-fullscreen', content='yes')
		meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')
		// CSS
		link(rel='stylesheet', href='../css/storymap.css?v1')
		//FONT
		link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Bevan%7CPontano+Sans&amp;subset=latin,latin')
		// Style
		style
			html, body {
				height:100%;
				width:100%;
				padding: 0px;
				margin: 0px;
			}
			.vco-storymap {
				font-family:'Pontano Sans',sans-serif !important;
			}
			.vco-storymap h1, .vco-storymap h2, .vco-storymap h3, .vco-storymap h4, .vco-storymap h5, .vco-storymap h6 {
				font-family:'Bevan',serif !important;
				font-weight: normal;
			}

		// HTML5 shim, for IE6-8 support of HTML elements
		//if lt IE 9
			script(src='https://html5shim.googlecode.com/svn/trunk/html5.js')

	body
		div#storymap-another(style="width:500px;height:500px")
		div#storymap
		div#storyslider
		div#storyslider-another
		
		// JavaScript
		script(src='../js/storymap-min.js')
		script
			var storymap = new VCO.StoryMap('storymap', 'marktwain.json');
			var storymap_another = new VCO.StoryMap('storymap-another', 'marktwain.json');
			var story = new VCO.StorySlider('storyslider');
			var story_another = new VCO.StorySlider('storyslider-another');
			window.onresize = function(event) {
				storymap.updateDisplay();
				storymap_another.updateDisplay();
				story.updateDisplay();
				story_another.updateDisplay();
			}